<template>
    <div class="d-flex flex-column align-items-center mb-2">
        <div class="d-flex justify-content-end" style="width: 67%;">
            <div><el-button type="primary" plain @click="add">新增存证</el-button></div>
        </div>
        <el-card v-for="(item, index) in data.cardList" :key="index" class="box-card mt-4 mb-4">
            <template #header>
                <div class="card-heaer d-flex justify-content-between">
                    <span class="title">{{ item.name }}</span>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="7"><el-text class="mx-1" type="info">成交号</el-text></el-col>
                <el-col :span="7" class="text-center"><el-text class="mx-1" type="info">成交时间</el-text></el-col>
                <el-col :span="10" class=""><el-text class="mx-1" type="info">操作</el-text></el-col>
                <el-col :span="7" class="pt-4">{{item.no}}</el-col>
                <el-col :span="7" class="text-center pt-4">{{item.dealTime}}</el-col>
                <el-col :span="10" class="pt-4">
                    <el-button type="success" plain @click="openDeal">查看证书</el-button>
                    <el-button type="warning" plain>下载证书</el-button>
                    <el-button type="info" plain>下载成交确认书</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
    <div class="container d-flex justify-content-end mb-5">
        <Pagination 
            :total="91"
            :pageSize="5"
        />
    </div>
    <MyDialog ref="addDialog" title="新增存证" @confirm="addConfirm($event)">
        <div  
            v-loading="addLoadding"
            :element-loading-text="'存证新增中，请稍等...'"
        >
            <!-- 上传文件 -->
            <FileUpload
                ref="uploadRef"
                :drag="true"
                :isTip = "false"
            />
        </div>
        
    </MyDialog>
    <MyDialog ref="dialog" title="区块链证书" @confirm="confirm($event)">
        <div class="d-flex justify-content-center w-100">
            <el-image src="/bi_frontend/imgs/deal.jpg"></el-image>
        </div>
    </MyDialog>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import FileUpload from '@/components/FileUpload.vue'
    import MyDialog from '@/components/MyDialog.vue'
    import Pagination from '@/components/Pagination.vue'
    import { ElMessage} from 'element-plus'

    const addDialog = ref()
    const addLoadding = ref(false)
    const dialog = ref()
    const uploadRef = ref()

    const data = reactive({
       cardList: [
            {name:"汕头国瑞非金债权成交确认书", dealTime:"2023-11-30 08:27:04", no:"2023113008270465083424"},
            {name:"广东鸿禧集团有限公司债权成交确认书", dealTime:"2023-11-20 14:21:31", no:"20231130082702340891"},
            {name:"四川亚科智能科技股份有限公司债权成交确认书", dealTime:"2023-11-14 10:20:09", no:"202311300827046506450"},
            {name:"广州市黄埔房地产开发总公司债权成交确认书", dealTime:"2023-11-12 11:26:34", no:"2023113008270465043553"},
            {name:"佛山市顺德区商都贸易有限公司成交确认书", dealTime:"2023-11-10 18:29:07", no:"2023113008270465045355"}
       ],
       totalNumber: 0
    })

    const add = () => {
        addDialog.value.openDialog()
    }

    const openDeal = () => {
        dialog.value.openDialog()
    }
    const addConfirm = (e: any) => {
        addLoadding.value = true
        setTimeout(function(){
            uploadRef.value.clearAttachments()
            addLoadding.value = false
            e.callback(true)
            ElMessage.success('存证新增成功')
            dialog.value.openDialog()
        },5000)
    }

    const confirm = (e: any) => {
        e.callback(true)
    }

</script>
<style>
    .el-card {
        width: 67%;
    }

    .el-card__header {
        border-bottom: none !important;
    }

    .title:hover {
        cursor: pointer;
        color: #337ecc;
    }
    .title {
        font-size: 20px;
        font-weight:600;
    }
</style>